{extend name='table'}

{block name="style"}
<style>
    .layui-table td .layui-table-cell {
        height: auto !important;
        overflow: visible;
        text-overflow: inherit;
        white-space: normal;
        word-break: break-all;
    }
    .layui-table td .layui-table-grrid-down{
        display: none;
    }
    .custom_style {
        line-height: 22px !important;
    }
    .custom_style .span_right {
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 隐藏溢出内容 */
        text-overflow: ellipsis;
    }
</style>
{/block}

{block name="content"}
<div class="layui-tab layui-tab-card">
    <div class="layui-tab-content">
        <form class="layui-form layui-form-pane form-search" action="{:sysuri()}" onsubmit="return false" method="vo" autocomplete="off">
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">{:lang('店铺')}</label>
                <div class="layui-input-inline">
                    <select id="shop_id" lay-search class="layui-select">
                        <option value=''>-- {:lang('请选择')} --</option>
                        {foreach $shop_list as $key => $item}
                        <option value="{$key}">{$item}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">{:lang('下单时间')}</label>
                <div class="layui-input-inline">
                    <input data-date-range id="report_time" value="" placeholder="{:lang('请选择时间')}" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item layui-inline">
                <button class="layui-btn layui-btn-primary" type="button" id="search_btn"><i class="layui-icon">&#xe615;</i> {:lang('搜 索')}</button>
                <button class="layui-btn layui-btn-primary" type="reset"> {:lang('重置')}</button>
            </div>
        </form>

        <table id="TableList" lay-filter="TableList"></table>
    </div>
</div>
{/block}

{block name="script"}
<script>
    $(function () {
        let table = layui.table;

        table.render({
            elem: '#TableList',
            even: true, height: 'full-130',
            url: '{:url("getFinanceList")}',
            page: true,
            limit: 15,
            cols: [[
                {field: 'period', title: '{:lang("阶段")}', minWidth: 220, align: 'center', templet: '#html_period'},
                {field: 'invoice_transfer', title: '{:lang("应付金额")}', minWidth: 100, align: 'center'},
                {field: 'loan', title: '{:lang("贷款金额")}', minWidth: 100, align: 'center'},
                {field: 'payments', title: '{:lang("付款方式")}', minWidth: 100, align: 'center', templet: '#html_payments'},
                {field: 'return', title: '{:lang("退货和取消订单")}', minWidth: 200, align: 'center',templet: '#html_return'},
                {field: 'rfbs', title: '{:lang("rFBS模式转账金额")}', minWidth: 200, align: 'center',templet: '#html_rfbs'},
                {field: 'services', title: '{:lang("服务")}', minWidth: 250, align: 'center',templet: function(d) {
                    let html = '';
                    if(isNotEmpty(d.services)) {
                        html += '<div className="custom_style">';
                        html += '<div style="display: flex;">';
                        html += '<span style="flex-shrink: 0;">{:lang("总金额")}：</span>';
                        html += '<span className="span_right">{{d.services.total}}</span>';
                        html += '</div>';
                        for (let i in d.services.items) {
                            html += '<div style="display: flex;">';
                            html += '<span style="flex-shrink: 0;">'+d.services.items[i].service_name+'：</span>';
                            html += '<span class="span_right">'+d.services.items[i].price+'</span>';
                            html += '</div>';
                        }
                        html += '</div>';
                    }
                    return html;
                }},
                {field: 'others', title: '{:lang("补贴和其他津贴")}', minWidth: 200, align: 'center',templet: function(d) {
                    let html = '';
                    if(isNotEmpty(d.others)) {
                        html += '<div class="custom_style">';
                        html += '<div style="display: flex;">';
                        html += '<span style="flex-shrink: 0;">{:lang("总金额")}：</span>';
                        html += '<span class="span_right">{{d.others.total}}</span>';
                        html += '</div>';
                        for (let i in d.others.items) {
                            html += '<div style="display: flex;">';
                            html += '<span style="flex-shrink: 0;">'+d.others.items[i].others_name+'：</span>';
                            html += '<span class="span_right">'+d.others.items[i].price+'</span>';
                            html += '</div>';
                        }
                        html += '</div>';
                    }
                    return html;
                }},
                {field: 'begin_balance_amount', title: '{:lang("开始阶段的收支")}', align: 'center', minWidth: 150},
                {field: 'end_balance_amount', title: '{:lang("结束阶段的收支")}', align: 'center', minWidth: 150},
            ]]
        });

        $('#search_btn').on('click', function () {
            let shop_id = $('#shop_id').val();
            let report_time = $('#report_time').val();
            if(!isNotEmpty(shop_id)) {
                layer.msg('{:lang("请选择店铺")}');
                return false;
            }
            if(!isNotEmpty(report_time)) {
                layer.msg('{:lang("请选择时间")}');
                return false;
            }
            table.reload('TableList', {
                where: {shop_id: shop_id, report_time: report_time}
            });
        })
    });
</script>
<script type="text/html" id="html_period">
    <div class="custom_style">
        <div style="display: flex;">
            <span style="flex-shrink: 0;">{:lang('开始时间')}：</span>
            <span class="span_right">{{ d.period.begin }}</span>
        </div>
        <div style="display: flex;">
            <span style="flex-shrink: 0;">{:lang('结束时间')}：</span>
            <span class="span_right">{{ d.period.end }}</span>
        </div>
    </div>
</script>

<script type="text/html" id="html_payments">
    <div class="custom_style">
        {{#  layui.each(d.payments, function(index, item){ }}
        <div style="display: flex;">
            <span style="flex-shrink: 0;">{{= item.currency_code }}：</span>
            <span class="span_right">{{= item.payment }}</span>
        </div>
        {{#  }); }}
    </div>
</script>

<script type="text/html" id="html_return">
    <div class="custom_style">
        <div style="display: flex;">
            <span style="flex-shrink: 0;">{:lang('总金额')}：</span>
            <span class="span_right">{{ d.return.total }}</span>
        </div>
        <div style="display: flex;">
            <span style="flex-shrink: 0;">{:lang('退款金额和佣金')}：</span>
            <span class="span_right">{{ d.return.amount }}</span>
        </div>
    </div>
</script>

<script type="text/html" id="html_rfbs">
    <div class="custom_style">
        <div style="display: flex;">
            <span style="flex-shrink: 0;">{:lang('总金额')}：</span>
            <span class="span_right">{{ d.rfbs.total }}</span>
        </div>
        <div style="display: flex;">
            <span style="flex-shrink: 0;">{:lang('买家转账金额')}：</span>
            <span class="span_right">{{ d.rfbs.transfer_delivery }}</span>
        </div>
        <div style="display: flex;">
            <span style="flex-shrink: 0;">{:lang('退还给买家的转账金额')}：</span>
            <span class="span_right">{{ d.rfbs.transfer_delivery_return }}</span>
        </div>
        <div style="display: flex;">
            <span style="flex-shrink: 0;">{:lang('物流转账金额补贴')}：</span>
            <span class="span_right">{{ d.rfbs.compensation_delivery_return }}</span>
        </div>
        <div style="display: flex;">
            <span style="flex-shrink: 0;">{:lang('部分退款转移给买家')}：</span>
            <span class="span_right">{{ d.rfbs.partial_compensation }}</span>
        </div>
        <div style="display: flex;">
            <span style="flex-shrink: 0;">{:lang('退换部分退款')}：</span>
            <span class="span_right">{{ d.rfbs.partial_compensation_return }}</span>
        </div>
    </div>
</script>

{/block}
